<template>
    <span>
        <el-button type="primary" @click="toAdd">添加属性</el-button>
        <el-input v-model="nameFind" @input="nameFilter" style="width:300px;margin-left:15px"></el-input>
    </span>

    <el-divider/>
    <el-descriptions title="属性组信息" column="2">
        <el-descriptions-item label="属性组名称" >
            {{groupInfo.attrGroupName}}</el-descriptions-item>
        <el-descriptions-item  label="所属类别">{{groupInfo.categoryName}}</el-descriptions-item>
        <el-descriptions-item label="属性组简介">{{groupInfo.description}}</el-descriptions-item>
    </el-descriptions>
    <el-row>
        <el-col :span="23"></el-col>
        <el-col :span="1"><el-button @click="back" type="warning" size="small">返回</el-button></el-col>
    </el-row>
    <el-divider></el-divider>
    <el-table-v2
        :columns="columns"
        :data="showData"
        :width="1300"
        :height="370"
        
    />

    <el-dialog
        v-model="addDialog"
        title="添加属性"
        width="500px">
        <el-form :model="newAttr" label-position="left" ref="addForm">
            <el-form-item label="属性名称" label-width="100px">
                <el-input v-model="newAttr.attrName" style="width:300px"/>
            </el-form-item>
            <el-form-item label="属性值类型" label-width="100px">
                <el-select v-model="newAttr.valueType" style="width:300px" >
                    <el-option label="单值" :value="0"></el-option>
                    <el-option label="多值" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="可选值列表" label-width="100px">
                <el-input placeholder="可选值列表，用逗号分隔" v-model="newAttr.valueSelect" type="textarea" :rows="5" style="width:300px"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancelAdd()">取消</el-button>
            <el-button type="primary" @click="add">确认添加</el-button>
        </template>
    </el-dialog>

    <el-dialog
        v-model="updateDialog"
        title="修改属性"
        width="500px">
        <el-form :model="updateAttr" label-position="left" ref="updateForm">
        <el-form-item label="属性名" label-width="100px">
            <el-input v-model="updateAttr.attrName" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="可选值列表" label-width="100px">
            <el-input v-model="updateAttr.valueSelect" type="textarea" :rows="5" style="width:300px"></el-input>
        </el-form-item>

        </el-form>
        <template #footer>
            <el-button @click="cancelUpdate">取消</el-button>
            <el-button type="primary" @click="update" >更新</el-button>
        </template>
    </el-dialog>
</template>

<script>
import { ElButton } from 'element-plus'
import {ref, reactive,getCurrentInstance} from 'vue'
export default {
  setup(){
    const showData = ref([])
    const tableData = ref([])
    const addDialog = ref(false)
    const updateDialog = ref(false)
    const addForm = ref()
    const thirdCategory = ref([])
    const thirdCategoryIdToNameMap = ref(new Map())
    const {proxy} = getCurrentInstance()
    const groupId = proxy.$route.query.groupId
    const newAttr = reactive({
        attrName:'',
        searchType:0,
        valueType:0,
        valueSelect:'',
        attrType:0,
        enable:0,
        showDesc:0,
        categoryId:proxy.$route.query.categoryId,
        group:proxy.$route.query.groupId
    })
    const updateAttr = reactive({
        attrName:'',
        searchType:0,
        valueType:0,
        valueSelect:'',
        attrType:0,
        enable:0,
        showDesc:0,
        categoryId:proxy.$route.query.categoryId,
        group:proxy.$route.query.groupId
    })
    const updateForm = ref()
    const nameFind = ref('')
    const groupInfo = reactive({
        attrGroupName:'',
        categoryId:-1,
        description:''
    })

    const columns = [
        {
            key:'id',
            dataKey:'id',
            title:'序号',
            width:75
        },
        {
            key:'attrName',
            dataKey:'attrName',
            title:'属性名',
            width:150
        },
        {
            key:'searchType',
            dataKey:'searchType',
            title:'检索',
            width:75,
            align:'center',
            cellRenderer:(data) => {
                if(data.rowData.searchType == 0){
                    return (
                        <ElButton onClick={()=>{changeSearchType(data)}} type="danger" size="small"><el-icon><Refresh /></el-icon>不支持</ElButton>
                    )
                }
                return (
                    <ElButton onClick={()=>{changeSearchType(data)}} type="primary" size="small"><el-icon><Refresh /></el-icon>支持</ElButton>
                )
            }
        },
        {
            key:'valueType',
            dataKey:'valueType',
            title:'属性值类型',
            width:100,
            align:'center',
            cellRenderer:(data) => {
                if(data.rowData.valueType == 0){
                    return (
                        <ElButton onClick={()=>{changeValueType(data)}} type="primary" size="small"><el-icon><Refresh /></el-icon>单值</ElButton>
                    )
                }
                return (
                    <ElButton onClick={()=>{changeValueType(data)}} color="#626aef" size="small"><el-icon><Refresh /></el-icon>多值</ElButton>
                )
            }
        },

        {
            key:'attrType',
            dataKey:'attrType',
            title:'属性类型',
            width:100,
            align:'center',
            cellRenderer:(data) => {
                if(data.rowData.attrType == 2){
                    return (
                            <ElButton onClick={()=>{changeAttrType(data)}} color="#E800E8" size="small"><el-icon><Refresh /></el-icon>销售和基本</ElButton>

                    )
                }
                if(data.rowData.attrType == 0){
                    return (
                        <ElButton onClick={()=>{changeAttrType(data)}} type="primary" size="small"><el-icon><Refresh /></el-icon>销售属性</ElButton>
                    )
                }
                return (
                    <ElButton onClick={()=>{changeAttrType(data)}} color="#626aef" size="small"><el-icon><Refresh /></el-icon>基本属性</ElButton>
                )
            }
        },
        {
            key:'enable',
            dataKey:'enable',
            title:'启用状态',
            width:75,
            align:'center',
            cellRenderer:(data) => {
                if(data.rowData.enable == 0){
                    return (
                            <ElButton onClick={()=>{changeEnable(data)}} type="danger" size="small"><el-icon><Refresh /></el-icon>禁用</ElButton>
                    )
                }
                return (
                    <ElButton onClick={()=>{changeEnable(data)}} type="primary" size="small"><el-icon><Refresh /></el-icon>启用</ElButton>
                )
            }
        },
        {
            key:'showDesc',
            dataKey:'showDesc',
            title:'展示状态',
            width:100,
            align:'center',
            cellRenderer:(data) => {
                if(data.rowData.showDesc == 0){
                    return (
                            <ElButton onClick={()=>{changeShow(data)}} type="warning" size="small"><el-icon><Refresh /></el-icon>不展示</ElButton>
                    )
                }
                return (
                    <ElButton onClick={()=>{changeShow(data)}} type="primary" size="small"><el-icon><Refresh /></el-icon>展示中</ElButton>
                )
            }
        },
        {
            key:'categoryName',
            dataKey:'categoryName',
            title:'所属类别',
            width:100
        },
        {
            key:'valueSelect',
            dataKey:'valueSelect',
            title:'可选值列表',
            width:270
        },
        {
            title:'操作',
            width:150,
            align:'center',
            cellRenderer:(data) => (
                <>
                <ElButton type="warning" onClick={() => {toUpdate(data)}}  size="small">修改</ElButton>
                <ElButton type="danger" onClick={() =>{toDelete(data)}} size="small">删除</ElButton>
                </>
            )
        },
    ]

    const getData = () => {
        proxy.$http.get(proxy.$url.PmsAttrControllerBaseUrl + '/getAllAttrByGroup',{
            params:{
                groupId:groupId
            }
        }).then(res => {
            showData.value = []
            tableData.value = []
            if(res.data.code === 2000){
                for(let item of res.data.data){
                    item.categoryName = thirdCategoryIdToNameMap.value.get(item.categoryId)
                    tableData.value.push(item)
                }
                showData.value = tableData.value
            }
        })
    }

    const getCategory = ()=>{
            proxy.$http.get(proxy.$url.PmsCategoryControllerBaseUrl + '/getThirdCategory')
                .then(res => {
                    if(res.data.code === 2000){
                        thirdCategory.value = res.data.data
                        createThirdCategoryMap()
                        getGroupInfo()
                        getData()
                    }
                })
    }

        const createThirdCategoryMap = () => {
            thirdCategoryIdToNameMap.value = new Map()
            for (let item of thirdCategory.value){
                thirdCategoryIdToNameMap.value.set(item.id,item.name)
            }
        }
    
    const cancelAdd = () => {
        addDialog.value = false
        newAttr.attrName = ''
        newAttr.valueSelect = ''
        newAttr.valueType = 0
        addForm.value.resetFields()
        
    }

    const add = () => {
        proxy.$http.put(proxy.$url.PmsAttrControllerBaseUrl + '/check/addAttr',newAttr)
            .then(res => {
                if(res.data.code === 2000){
                    proxy.$message({
                        message:res.data.message,
                        type:"success"
                    })
                    getData()
                    cancelAdd()
                }else{
                    proxy.$message({
                        message:res.data.message,
                        type:"error"
                    })
                }
            })
    }

    const toAdd = () =>{
        addDialog.value = true
    }

    const toUpdate = (data) => {
        updateAttr.attrName = data.rowData.attrName
        updateAttr.id = data.rowData.id
        updateAttr.searchType = data.rowData.searchType
        updateAttr.attrType = data.rowData.attrType
        updateAttr.valueType = data.rowData.valueType
        updateAttr.valueSelect = data.rowData.valueSelect
        updateAttr.enable = data.rowData.enable
        updateAttr.showDesc = data.rowData.showDesc
        updateDialog.value = true
    }

    const cancelUpdate = () =>{
        updateForm.value.resetFields()
        updateDialog.value = false
    }

    const update = () => {
        proxy.$http.post(proxy.$url.PmsAttrControllerBaseUrl + '/check/updateAttr',updateAttr)
            .then(res => {
                if(res.data.code === 2000){
                    proxy.$message({
                        message:res.data.message,
                        type:'success'
                    })
                    getData()
                    cancelUpdate()
                }else{
                    proxy.$message({
                        message:res.data.message,
                        type:'error'
                    })
                }

            })
    }

    const toDelete = (data) =>{
        proxy.$http.delete(proxy.$url.PmsAttrControllerBaseUrl + '/check/deleteAttr',{
            params:{
                id:data.rowData.id
            }
        }).then(res => {
            if(res.data.code === 2000){
                proxy.$message({
                    message:res.data.message,
                    type:'success'
                })
                getData()
            }else{
                proxy.$message({
                    message:res.data.message,
                    type:'error'
                })
            }
        })
    }

    const changeStatus = (data,url,attr) => {
        proxy.$http.get(proxy.$url.PmsAttrControllerBaseUrl + url,{
            params:{
                id:data.rowData.id,
                now:data.rowData[attr]
            }
        }).then(res =>{
            if(res.data.code === 2000){
                proxy.$message({
                    message:res.data.message,
                    type:'success'
                })
                getData()
            }else{
                proxy.$message({
                    message:res.data.message,
                    type:'error'
                })
            }
        })
    }

    const changeSearchType = (data) => {
        changeStatus(data,'/check/changeSearchType','searchType')
    }

    const changeValueType = (data) => {
        changeStatus(data,'/check/changeValueType','valueType')
    }

    const changeAttrType = (data) => {
        changeStatus(data,'/check/changeAttrType','attrType')
    }

    const changeEnable = (data) => {
        changeStatus(data,'/check/changeEnable','enable')
    }

    const changeShow = (data) => {
        changeStatus(data,'/check/changeShow','showDesc')
    }

    const nameFilter = () =>{

        showData.value = []
        if(!nameFind.value){
            showData.value = tableData.value
            return
        }
        for(let item of tableData.value){
            if(item.attrName.indexOf(nameFind.value) != -1){
                showData.value.push(item)
            }
        }
    }

    const getGroupInfo = () => {
        proxy.$http.get(proxy.$url.PmsAttrGroupControllerBaseUrl + '/getOneById',{params:{id:groupId}})
            .then(res => {
                if(res.data.code === 2000){
                    groupInfo.attrGroupName = res.data.data.attrGroupName
                    groupInfo.categoryId = res.data.data.categoryId
                    groupInfo.description = res.data.data.description
                    groupInfo.categoryName = thirdCategoryIdToNameMap.value.get(res.data.data.categoryId)
                }
            })
    }
    
    const back = () =>{
        proxy.$router.push({path:'/main/product/attributeGroup'})
    }

    getCategory()

    return {
        showData,
        columns,
        addDialog,
        addForm,
        updateForm,
        newAttr,
        updateAttr,
        updateDialog,
        nameFind,
        groupInfo,
        cancelAdd,
        add,
        toAdd,
        cancelUpdate,
        update,
        nameFilter,
        back
    }
  }
    
}
</script>

<style scoped>


</style>